<template>
  <section class="discovery">
    <!-- 轮播图 -->
    <section class="carousel">
      <el-carousel :interval="4000" type="card" height="230px">
        <el-carousel-item v-for="(item,index) in banners" :key="index">
          <img :src="item.imageUrl" />
        </el-carousel-item>
      </el-carousel>
    </section>
    <!-- 推荐歌单 -->
    <section class="recommend">
      <h1 class="title">推荐歌单</h1>
      <ul class="song-list">
        <li v-for="(item,index) in list" :key="index" class="song-item" @click="toSongList(item.id)">
          <!-- <span class="item-source">{{item.copywriter}}</span> -->
          <img :src="item.picUrl" />
          <p v-text="item.name" class="list-name"></p>
        </li>
      </ul>
    </section>
    <!-- 最新音乐 -->
    <section class="new-music">
      <h1 class="title">最新音乐</h1>
      <ul>
        <li v-for="(item,index) in songs" :key="index" class="music-item" @dblclick="playMusic(item.id)">
          <img :src="item.picUrl" alt />
          <section item-detail>
            <p v-text="item.name" class="item-name"></p>
            <p v-text="item.song.artists[0].name" class="item-artists"></p>
          </section>
        </li>
      </ul>
    </section>
    <!-- 推荐MV -->
    <section class="mv">
      <h1 class="title">推荐MV</h1>
      <ul class="mvs-ul">
        <li v-for="(item,index) in mv" :key="index" class="mv-item" @click="toMvdetailes(item.id)">
          <section class="viewers">
            <i class="el-icon-video-play"></i>
            <span v-text="item.playCount"></span>
          </section>
          <img :src="item.picUrl" alt />
          <p v-text="item.copywriter" class="item-name"></p>
          <p v-text="item.artistName" class="artist-name"></p>
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
import axios from "axios";
import { formattingPlaycount } from "@/api/commend";
export default {
  name: "discovery",
  data() {
    return {
      // 轮播图
      banners: [],
      // 推荐歌单
      list: [],
      // 最新音乐
      songs: [],
      // 推荐mv
      mv: [],
    };
  },
  methods: {
    // 播放音乐
    playMusic(id) {
      axios({
        method: "get",
        url: "https://autumnfish.cn/song/url",
        params: {
          id: id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        this.$parent.$parent.$parent.$parent.$parent.url = url;
      });
    },
    // 歌单详情
    toSongList(id) {
      this.$router.push(`/songlists?keyid=${id}`);
    },
    
    toMvdetailes(id){
      this.$router.push(`/mvdetails?mvid=${id}`);
    },
  },
  created() {
    // 轮播图接口地址 https://autumnfish.cn/banner
    axios({
      method: "get",
      url: "https://autumnfish.cn/banner",
    }).then((res) => {
      this.banners = res.data.banners;
    });
    // 推荐歌单接口地址 https://autumnfish.cn/personalized (可选参数：limit获取数量默认30,不支持offset)
    axios({
      method: "get",
      url: "https://autumnfish.cn/personalized",
      params: {
        limit: 10,
      },
    }).then((res) => {
      this.list = res.data.result;
    });
    // 最新音乐接口地址 https://autumnfish.cn/personalized/newsong
    axios({
      method: "get",
      url: "https://autumnfish.cn/personalized/newsong",
    }).then((res) => {
      this.songs = res.data.result;
    });
    // 推荐MV接口地址 https://autumnfish.cn/personalized/mv
    axios({
      method: "get",
      url: "https://autumnfish.cn/personalized/mv",
    }).then((res) => {
      this.mv = formattingPlaycount(res.data.result);
    });
  },
};
</script>

<style lang='scss'>
</style>